<template>
	<view class="placeOrder">
		<!-- 头部收获地址 -->
		<view class="placeOrder_add">
			<view class="address">
				<view class="address_left">
					<image src="../../static/image/order/dizhi.png"></image>
				</view>
				<!-- 添加过的地址 -->
				<view class="address_center" v-if="addressData.address" @tap="userAddress()">
					<view class="address_center_top">
						<text class="name">{{ addressData.name }}</text>
						<text class="phone">{{ addressData.mobile }}</text>
					</view>
					<view class="address_center_bottom">{{ addressData.province }} {{ addressData.city }}
						{{ addressData.district }} {{addressData.address}}</view>
				</view>
				<!-- 没有添加的地址 -->
				<view class="address_center" v-else @tap="addAddress('add')">
					<view class="address_center_fill">请前往填写收获地址</view>
				</view>
				<view class="address_right">
					<image src="../../static/image/class/jinru.png"></image>
				</view>
			</view>
		</view>
		<!-- 展示订单的信息 -->
		<view class="placeOrder_infors" v-for="(shop, index) in orderData.lists" :key="index">
			<view class="placeOrder_infor" v-for="(goods, key) in shop.products" :key="key">
				<view class="placeOrder_infor_left">
					<image :src="$wanlshop.oss(goods.image, 77, 77)" mode="aspectFill"></image>
					<view class="num">
						<text class="num1">共</text>
						<text class="num2">{{goods.number}}</text>
						<text class="num1">件商品</text>
					</view>
				</view>
				<view class="placeOrder_infor_center">
					<view class="name">{{goods.title}}</view>
					<view class="name1">款式：<text v-for="(item, skey) in goods.sku.difference" :key="skey">
							<block v-if="skey != 0">-</block>{{ item }}
						</text></view>
				</view>
				<view class="placeOrder_infor_right" v-if="is_DC==0 || is_DC==1">￥{{ goods.sku.price }}</view>
				<view class="placeOrder_infor_right" v-if="is_DC==2">￥{{ goods.sku.DCprice }}</view>
			</view>

			<!-- 选择支付方式 -->
			<view class="placeOrder_Payment_method">
				<!--  @click="getBulletFrame" -->
				<view class="method1">
					<view class="method1_left">支付方式</view>
					<view class="method1_right">
						<!-- {{parments}} -->
						<view class="method1_right_name">微信支付</view>
						<!-- <view class="method1_right_back">
							<image src="../../static/image/class/jinru.png"></image>
						</view> -->
					</view>
				</view>
				<view class="method1" @tap="queryCoupon(index)">
					<view class="method1_left">优惠折扣</view>
					<view class="method1_right">
						<view class="method1_right_name">
							<block v-if="couponData[index]">
								<text class="wlIcon-youhuiquantuangou text-red margin-right-xs"></text>
								<block
									v-if="couponData[index].type == 'reduction' || (couponData[index].type == 'vip' && couponData[index].usertype == 'reduction')">
									<text>满{{Number(couponData[index].limit)}}减</text>
									￥{{Number(couponData[index].price)}}
								</block>
								<block
									v-if="couponData[index].type == 'discount' || (couponData[index].type == 'vip' && couponData[index].usertype == 'discount')">
									<text>满{{Number(couponData[index].limit)}}打</text>
									{{Number(couponData[index].discount)}} 折
								</block>
								<block v-if="couponData[index].type == 'shipping'">
									<text>满{{Number(couponData[index].limit)}}</text>包邮
								</block>
							</block>
							<block v-else>
								<text class="text-gray">请选择</text>
							</block>
						</view>
						<view class="method1_right_back">
							<image src="../../static/image/class/jinru.png"></image>
						</view>
					</view>
				</view>
				<view class="method1">
					<view class="method1_left">运费</view>
					<view class="method1_right">
						<view class="method1_right_name">快递</view>
						<view class="price">{{shop.freight_price_bak}}</view>
						<!-- <view class="method1_right_back">
						<image src="../../static/image/class/jinru.png"></image>
					</view> -->
					</view>
				</view>
				<!-- 备注 -->
				<view class="remarks">
					<textarea placeholder="如您有其他特需要求,请在此备注" v-show="textShow" placeholder-style="color:#a5a5a5"
						v-model="shop.remarks"></textarea>
				</view>
				<view class="money">
					<text class="money1">商品金额：</text>
					<text class="money2">￥</text>
					<text class="money3">{{shop.order_price.split('.')[0]}}</text>
					<text class="money2">.{{shop.order_price.split('.')[1]}}</text>
				</view>
				<view class="money">
					<text class="money1">实收运费：</text>
					<text class="money2">￥</text>
					<text class="money3">{{shop.freight_price_bak}}</text>
					<!-- <text class="money2">.{{shop.freight_price_bak.split('.')[1]}}</text> -->
				</view>
			</view>
		</view>
		<!-- 底部结算 -->
		<view class="placeOrder_bottom">
			<view class="placeOrder_bottom_left" @click="getPhone">
				<image src="../../static/image/class/kefu.png"></image>
			</view>
			<view class="placeOrder_bottom_right">
				<view class="total">
					{{orderData.statis.allnum }}项合计：
				</view>
				<view class="price">
					<view class="price_top">
						<text class="price1">￥</text>
						<text class="price2">{{orderData.statis.allsub}}</text>
						<!-- <text class="price1">.{{orderData.statis.allsub.split(".")[1]}}</text> -->
					</view>
					<view class="price_bottom">包装安装费</view>
				</view>
				<view class="settlement" @tap="addOrder">去结算</view>
			</view>
		</view>
		<!-- 选择支付方式弹框 -->
		<popup-bottom :show="popupShow" @close="handleClose">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="left">请选择支付方式</view>
					<view class="right" @click="handleClose">
						<image src="../../static/image/icon/quxiao.png" mode=""></image>
					</view>
				</view>
				<view class="Payment1" :class="{'isColor':isColor==item.id}" v-for="(item,index) in parment"
					:key='index' @click="getPayments(item)">{{item.name}}</view>

				<view class="btn" @click="handleClose">确定</view>
			</view>
		</popup-bottom>
		<!-- 优惠券弹框 -->
		<popup-bottom :show="popupShow1" @close="handleClose1">
			<view class="popup-content1">
				<view class="coupon">
					<view class="title">优惠券</view>
					<view class="iconfont icon-close" @click="handleClose1"></view>
				</view>
				<view class="wanl-coupons">
					<scroll-view class="wanl-coupon scroll-y" scroll-y="true" v-if="couponIndex != null">
						<view v-for="(coupon, index) in orderData.lists[couponIndex].coupon" :key="index"
							:class="coupon.type" class="item margin-bottom-bj radius-bock">
							<image :src="$wanlshop.appstc('/coupon/bg_coupon_3x.png')" mode="aspectFill" class="coupon-bg"></image>
							<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')"
							mode="aspectFill"	class="coupon-sign" v-if="coupon.state"></image>
							<view class="item-left">
								<block
									v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
									<view class="colour">
										<text class="text-price"></text>
										<text class="prices">{{Number(coupon.price)}}</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
										满{{Number(coupon.limit)}}减{{Number(coupon.price)}}
									</view>
								</block>
								<block
									v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
									<view class="colour">
										<text class="prices">{{Number(coupon.discount)}}</text>
										<text class="discount">折</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
										满{{Number(coupon.limit)}}打{{Number(coupon.discount)}}折
									</view>
								</block>
								<block v-if="coupon.type == 'shipping'">
									<view class="colour">
										<text class="prices">包邮</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
										满{{Number(coupon.limit)}}元包邮
									</view>
								</block>
							</view>
							<view class="item-right padding-bj">
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle">
										{{coupon.type_text}}
									</view>
									<text class="text-cut wanl-gray text-min">{{coupon.name}}</text>
								</view>
								<view class="content text-min">
									<view class="wanl-gray">

										<view v-if="coupon.grant != '-1'">
											<text class="wlIcon-dot"></text>目前仅剩余 {{coupon.surplus}} 张
										</view>

										<view v-if="coupon.drawlimit != 0">
											<text class="wlIcon-dot"></text>每人仅限领取 {{coupon.drawlimit}} 张
										</view>
										<block v-if="coupon.pretype == 'fixed'">
											<view>
												<text class="wlIcon-dot"></text>生效 {{coupon.startdate}}
											</view>
											<view>
												<text class="wlIcon-dot"></text>结束 {{coupon.enddate}}
											</view>
										</block>
										<block v-if="coupon.pretype == 'appoint'">
											<view v-if="coupon.validity == 0">
												<text class="wlIcon-dot"></text>未使用前 永久 有效
											</view>
											<view v-else>
												<text class="wlIcon-dot"></text>领取后 {{coupon.validity}} 天有效
											</view>
										</block>
									</view>
									<view class="cu-btn sm round line-colour" @tap="onCoupons(index)"
										v-if="coupon.state">
										<text v-if="coupon.choice"> 已选择 </text>
										<text v-else> 立即使用 </text>
									</view>
									<view class="cu-btn sm round" @tap="onReceive(index)" v-else>
										立即领取
									</view>
								</view> -->
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="btn" @tap="hideModal">完成</view>
			</view>
		</popup-bottom>
	</view>
</template>

<script>
	import PopupBottom from '@/components/popup-bottom/popup-bottom.vue'
	export default {
		data() {
			return {
				// 支付方式选择
				isColor: 0,
				// 弹框显示隐藏
				popupShow: false,
				// 弹框显示隐藏
				popupShow1: false,
				// 文本框显示隐藏
				textShow: true,
				// 支付方式
				parment: [{
						id: 1,
						name: '微信支付',
					},
					{
						id: 2,
						name: '支付宝支付',
					},
					{
						id: 3,
						name: '网上支付',
					},
				],
				// 选择好的支付方式
				parments: '请选择支付方式',
				// 从上页传递过来的数据
				optionData: {},
				cartType: null,
				// 地址
				addressData: {},
				// 订单数据
				orderData: {
					lists: [],
					statis: {
						allnum: 1,
						allsub: 0
					}
				},
				couponData: {},
				couponIndex: null,
				// 支付列表
				payList: [],
				order_no: '',
				order_pay_no: '',
				price: '0.00',
				order_id: '',
				// 判断是否是ui设计师 0 是客户，1是设计室审核，2是设计师
				is_DC: '',
				payNum:1,//支付方式 独立支付-合并支付


			};
		},
		components: {
			PopupBottom
		},
		methods: {
			// 选择支付方式
			getPayments(item) {
				this.isColor = item.id
				this.parments = item.name;
				console.log('sddbdb')
			},
			// 弹框关闭
			handleClose() {
				this.popupShow = false;
			},
			// 弹框关闭
			handleClose1() {
				this.popupShow1 = false;
				this.textShow = true;
			},
			// 选择支付方式
			getBulletFrame() {
				this.popupShow = true;

			},
			// 关闭弹出层
			hideModal() {
				this.popupShow1 = false;
				this.textShow = true;

			},
			// 拨打客服电话
			getPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '0574-87880789',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				})
			},
			// 查询优惠券，减缓服务器压力，单独查询（仅查询首次）
			async queryCoupon(index) {

				let data = this.orderData.lists[index];
				if (data.coupon.length == 0) {
					let goods_id = [];
					let shop_category_id = [];
					for (var i = 0; i < data.products.length; i++) {
						goods_id.push(data.products[i]['id']);
						shop_category_id.push(data.products[i]['shop_category_id']);
					};
					this.$api.post({
						url: '/wanlshop/coupon/query',
						data: {
							shop_id: data.shop_id,
							goods_id: this.unique(goods_id),
							shop_category_id: this.unique(shop_category_id),
							price: data.order_price
						},
						success: res => {
							data.coupon = res;

						}
					});
				}
				this.couponIndex = index;
				this.popupShow1 = true;
				this.textShow = false;
				console.log('wwrrr')

			},
			// 提交订单
			async addOrder() {
				if (this.orderData.statis.allnum === 0) {
					this.$wanlshop.msg('订单异常')
					return;
				}
				let address_id = this.addressData.id;
				if (address_id === 0) {
					this.$wanlshop.msg('请填写地址')
					return;
				}
				let data = {
						lists: [],
						address_id: address_id
					},
					cart = [];
				this.orderData.lists.forEach((item, index) => {
					data.lists.push({
						shop_id: item.shop_id,
						remarks: item.remarks,
						products: [],
						//店铺优惠券和其他 在下追加
						coupon_id: this.couponData[index] ? this.couponData[index].id : 0
					});
					item.products.forEach(goods => {
						// 购物车数据
						cart.push({
							goods_id: goods.id,
							sku_id: goods.sku.id
						});
						// 商品数据
						data.lists[index].products.push({
							goods_id: goods.id,
							number: goods.number,
							sku_id: goods.sku.id,
							freight_id: goods.freight_id
						});
					});
				});
				// 提交订单数据data
				this.$api.post({
					url: '/wanlshop/order/addOrder',
					data: {
						order: data
					},
					loadingTip: '提交订单中...',
					success: res => {
						console.log('提交订单',res)
						this.$store.commit('statistics/order', {
							pay: this.$store.state.statistics.order.pay + cart.length
						});
						// 如果使用优惠券全局减去
						let coupon = Object.keys(this.couponData).length;
						if (coupon != 0) {
							this.$store.commit('statistics/dynamic', {
								coupon: this.$store.state.statistics.dynamic.coupon - coupon
							});
						}
						this.price = res[0].price;
						this.order_id = res[0].order_id;
						// 订单号
						this.order_no = res[0].order_no;
						// 支付号
						this.pay_no = res[0].pay_no;
						// 大厂软件，就是这么迷幻
						if (this.cartType == 'cart') {
							this.$store.dispatch('cart/del');
						}
						console.log('订单', res)
						let data = null;
						if (this.disabled) {
							return;
						}
						this.payList.map((value, index, array) => {
							if (value.select) {
								data = value;
								console.log('value:',value);
							} else {
								return;
							}
						});
						// 判断支付是否存在
						if (!data) {
							uni.showModal({
								content: "请选择支付方式",
								showCancel: false
							});
							return;
						} else {
							this.loading = true;
							this.disabled = true;
							// 获取小程序code
							// #ifdef MP
							uni.login({
								success: (e) => {
									console.log('login',e)
									this.wanlPay(data, e.code);
								},
								fail: (e) => {
									uni.showModal({
										content: "无法获取微信code,原因为: " + e.errMsg,
										showCancel: false
									})
								}
							})
							// #endif
							// #ifndef MP
							this.wanlPay(data);
							// #endif
						}
						this.$api.post({
							url: '/wanlshop/pay/getPay',
							data: {
								order_id: this.order_id
							},
							success: res => {
								console.log('支付：',res)
								uni.hideLoading();
								this.price = res.price;
								this.order_no = '订单号：' + res.order_no;
								this.order_pay_no = res.pay_no;
								this.order_id = res.order_id;
							}
						});
						// this.$wanlshop.to(`/pages/user/money/pay?data=${JSON.stringify(res)}`);
					}
				});
			},
			async wanlPay(data, code = null) {
				this.$api.post({
					url: '/wanlshop/pay/payment',
					data: {
						type: data.type,
						method: data.method,
						code: code,
						order_id: this.order_id
					},
					success: (res) => {
						console.log('选择支付方式',res);
						
						// 微信 H5支付
						if (data.type == 'wechat' && data.method == 'wap') {
							// 关闭loading
							this.loading = false;
							uni.showModal({
								title: '微信支付',
								content: '是否已完成支付',
								success: (res) => {
									if (res.confirm) {
										this.paySuccess();
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							// 异步查询是否支付成功
							window.location.href = res;
						}
						
						// 微信小程序支付
						if (data.type == 'wechat' && data.method == 'miniapp') {
							uni.requestPayment({
								appId: res.appId,
								nonceStr: res.nonceStr,//支付密钥
								package: res.package,
								paySign: res.paySign,
								signType: res.signType,//加密方式
								timeStamp: res.timeStamp,//时间戳
								success: (res) => {
									console.log('成功支付',res)
									this.paySuccess();
								},
								fail: (e) => {
									console.log('e',e)
									uni.showModal({
										content: "支付失败,原因为: " + e.errMsg,
										showCancel: false
									})
								}
							})
						}
						
					}
				});
			},
			// 支付成功
			paySuccess() {
				
				this.loading = false;
				this.$store.commit('statistics/order', {
					pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
					delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
				});
          console.log('支付成功1')
			this.$wanlshop.to('/pages/page/success?type=pay');
			},
			// // 领取优惠券
			async onReceive(index) {
				let coupon = this.orderData.lists[this.couponIndex].coupon[index];
				this.$api.post({
					url: '/wanlshop/coupon/receive',
					loadingTip: '领取中',
					data: {
						id: coupon.id
					},
					success: res => {
						coupon.id = res.id;
						coupon.state = true;
						this.$wanlshop.msg(res.msg);
						this.$store.commit('statistics/dynamic', {
							coupon: this.$store.state.statistics.dynamic.coupon + 1
						});
					}
				});
			},
			// 选中优惠券, 将优惠券放进数组中
			onCoupons(index) {
				let order = this.orderData.lists[this.couponIndex];
				let data = this.orderData.lists[this.couponIndex].coupon;
				data[index].choice = !data[index].choice;
				if (data[index].choice) {
					// 遍历取消掉其他选择的状态，for性能高于其他历遍
					for (var i = 0; i < data.length; i++) {
						if (i != index) {
							data[i].choice = false;
						}
					};
					// 更新选择
					this.couponData[this.couponIndex] = data[index];
					// @ 精度计算 this.$wanlshop.bcadd('0.132123',0.132123)
					// 满减计算
					if (data[index].type == 'reduction' || (data[index].type == 'vip' && data[index].usertype ==
							'reduction')) {
						order.freight.price = order.freight_price_bak;
						order.sub_price = this.$wanlshop.bcsub(this.$wanlshop.bcadd(order.order_price, order.freight
							.price), data[index].price);
						if (order.sub_price < 0) {
							order.sub_price = 0.01;
						}
					}
					// 折扣计算  前端出问题
					if (data[index].type == 'discount' || (data[index].type == 'vip' && data[index].usertype ==
							'discount')) {
						let discount = data[index].discount > 10 ? this.$wanlshop.bcdiv(data[index].discount, 100) : this
							.$wanlshop.bcdiv(data[index].discount, 10);
						order.freight.price = order.freight_price_bak;
						order.sub_price = this.$wanlshop.bcadd(this.$wanlshop.bcmul(order.order_price, discount), order
							.freight.price);
					}
					// 包邮计算
					if (data[index].type == 'shipping') {
						order.freight.price = 0;
						order.sub_price = order.order_price;
					}
				} else {
					// 恢复原价 1.0.2升级
					this.couponData = {};
					if (data[index].type == 'shipping') {
						order.freight.price = order.freight_price_bak;
					}
					order.sub_price = this.$wanlshop.bcadd(order.order_price, order.freight.price);
				}
				// 精度计算合计
				this.orderData.statis.allsub = 0;
				for (var i = 0; i < this.orderData.lists.length; i++) {
					this.orderData.statis.allsub = this.$wanlshop.bcadd(this.orderData.statis.allsub, this.orderData.lists[
						i].sub_price);
				};
				this.popupShow1 = false;
				this.textShow = true;
			},
			async loadData(address_id) {
				this.$api.post({
					url: '/wanlshop/order/getOrderGoodsList',
					loadingTip: '加载中',
					data: {
						data: this.optionData,
						address_id: address_id
					},
					success: res => {
						console.log('res', res);
						this.orderData = res.orderData;
						if (res.addressData) {
							this.addressData = res.addressData;
						} else {
							this.addAddress('newadd');
						}
					}
				});
			},
			// 数组去重并字符串
			unique(arr) {
				return Array.from(new Set(arr)).join(',');
			},
			// 跳转到添加地址页面
			addAddress(type) {
				this.$wanlshop.to(`../mines/MyAddress/MyAddress?source=1`);
			},
			userAddress() {
				this.$wanlshop.to('../mines/MyAddress/MyAddress?source=1');
			},
			getPayment() {	
				let method = 'wap';				
				// #ifdef MP-WEIXIN
				method = 'miniapp';
				// #endif
				// #ifdef H5
				this.payList.push({
					name: '微信支付',
					describe: '推荐使用微信支付',
					type: 'wechat',
					method: method,
					state: true,
					select: this.isbalance ? false : true
				});
				// #endif
				// #ifndef H5
				uni.getProvider({
					service: "payment",
					success: (e) => {
						console.log('eeee',e);
						e.provider.map((value) => {
							if (value == 'wxpay') {
								this.payList.push({
									name: '微信支付',
									describe: '推荐使用微信支付',
									type: 'wechat',
									method: method,
									state: true,
									select: this.isbalance ? false : true
								});
							} 
						})
					}
				});
				// #endif
			},
		},
		onLoad(option) {
			this.optionData = JSON.parse(option.data);
			this.loadData();
			this.cartType = option.type;
			// console.log('option', JSON.parse(option.data));
			console.log('optionData', this.optionData)
			this.$api.post({
				url: '/wanlshop/pay/getBalance',
				success: res => {
					console.log('res122', res)
					this.$store.commit('user/setUserInfo', {
						money: res
					});
					// 获取支付列表
					this.getPayment();
					
				}
			});
			var user = this.$store.state.user;
			this.is_DC = user.is_DC;
			console.log('is_DC', this.is_DC)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	@mixin flex-center-row {
		display: flex;
		flex-direction: row;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
	}

	@mixin flex-center {
		justify-content: center;
		align-items: center;
	}

	.placeOrder {
		// background-color: #f0f0f0;
		height: 300rpx;

		&_add {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			width: 700rpx;
			height: 170rpx;
			margin: 25rpx auto;
			box-sizing: border-box;
			padding: 25rpx 0;

			.address {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// background-color: pink;
				.address_left {
					// background-color:#4395bf ;
					width: 120rpx;
					height: 120rpx;
					line-height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.address_center {
					// background-color:#c763a7 ;
					width: 470rpx;
					height: 120rpx;

					&_top {
						// background-color: #F0AD4E;
						font-size: 28rpx;
						margin-bottom: 10rpx;

						.name {
							color: #282828;
							margin-right: 25rpx;
						}

						.phone {
							color: #8c8b8b;
						}
					}

					&_bottom {
						font-size: 26rpx;
						color: #282828;
						// 多行显示超出部分显示省略号
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
					}

					&_fill {
						// background-color: pink;
						font-size: 28rpx;
						color: #282828;
						height: 120rpx;
						line-height: 120rpx;
					}
				}

				.address_right {
					// sbackground-color: #75da61;
					width: 60rpx;
					height: 120rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		&_infors {


			.placeOrder_infor {
				background-color: #FFFFFF;
				border-radius: 10rpx;
				width: 700rpx;
				height: 170rpx;
				margin: 25rpx auto;
				box-sizing: border-box;
				padding: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&_left {

					image {
						width: 110rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}

					.num {
						// background-color: pink;
						font-size: 24rpx;

						.num1 {
							color: #282828;
						}

						.num2 {
							color: #ff0015;
						}
					}
				}

				&_center {
					width: 380rpx;
					// background-color: #DD524D;
					font-size: 24rpx;
					height: 120rpx;

					.name {
						color: #000000;
						//单行文本超出部分隐藏
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						// background-color: pink;
						
					}

					.name1 {
						color: #888888;
					}
				}

				&_right {
					width: 120rpx;
					height: 120rpx;
					// background-color: #4CD964;
					font-size: 24rpx;
					color: #000000;
				}
			}


			.placeOrder_Payment_method {
				background-color: #FFFFFF;
				border-radius: 10rpx;
				width: 700rpx;
				// height: 170rpx;
				margin: 25rpx auto;
				box-sizing: border-box;
				padding: 25rpx;

				.method1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// background-color: pink;
					height: 80rpx;

					.method1_left {
						font-size: 28rpx;
						color: #282828;
					}

					.method1_right {
						display: flex;
						align-items: center;

						// background-color: pink;
						&_name {
							font-size: 28rpx;
							color: #8c8b8b;
							margin-right: 20rpx;
						}

						.price {
							color: #ff0015;
							margin-right: 20rpx;
							font-size: 28rpx;
						}

						&_back {
							// background-color: red;
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
				}

				.remarks {
					background-color: #e9e9e9;
					border-radius: 10rpx;
					width: 650rpx;
					margin: 20rpx auto;
					height: 170rpx;

					textarea {
						font-size: 26rpx;
						padding: 20rpx;
						// background-color: red;
						width: 650rpx;
						height: 170rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						z-index: 0;
					}
				}

				.money {
					// background-color: pink;
					height: 80rpx;
					line-height: 80rpx;

					.money1 {
						font-size: 28rpx;
						color: #282828;
					}

					.money2 {
						font-size: 24rpx;
						color: #ff0015;
					}

					.money3 {
						font-size: 28rpx;
						color: #ff0015;
					}
				}
			}
		}

		&_bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			z-index: 99;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 1px solid #f0f0f0;

			&_left {
				// background-color: pink;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			&_right {
				display: flex;

				.total {
					font-size: 24rpx;
					color: #a5a5a5;
					// background-color: pink;
					padding-top: 6rpx;
				}

				.price {
					.price_top {
						.price1 {
							font-size: 26rpx;
							color: #ff0015;
							font-weight: 600;
						}

						.price2 {
							font-size: 32rpx;
							color: #ff0015;
							font-weight: 600;
						}
					}

					.price_bottom {
						text-align: right;
						// background-color: green;
						font-size: 24rpx;
						color: #a5a5a5;
					}
				}

				.settlement {
					width: 180rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					background-color: #ff0015;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 50rpx;
					margin: 3rpx 20rpx 0;

				}
			}
		}

		.popup-content {
			width: 715rpx;
			@include flex-center-column;
			background-color: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			// height: 300rpx;
			padding: 10rpx 20rpx;
			z-index: 99999;

			.popup-content_title {
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx;

				.left {
					font-size: 30rpx;
					color: #282828;
				}

				.right {
					background-color: #e9e9e9;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}
			}

			.Payment1 {
				font-size: 26rpx;
				color: #999999;
				margin-bottom: 20rpx;
				margin-left: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				// background-color: green;
			}

			.isColor {
				color: #ff0015;
			}

			.btn {
				width: 700rpx;
				margin: 20rpx auto 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 50rpx;
				background-color: #ff0015;
				font-size: 30rpx;
				color: #FFFFFF;

			}
		}

		.popup-content1 {
			width: 715rpx;
			@include flex-center-column;
			background-color: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			// height: 300rpx;
			padding: 10rpx 20rpx;
			z-index: 99999;

			.coupon {
				// background-color: pink;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.title {
					font-size: 32rpx;
					color: #282828;
					width: 380rpx;
					height: 60rpx;
					line-height: 60rpx;
					// background-color: #007AFF;
				}

				.iconfont {
					// background-color: red;
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 40rpx;
					color: #808080;
				}

			}

			.wanl-coupons {
				height: 600rpx;

				// background-color: pink;
				.wanl-coupon {
					height: 600rpx;
					position: relative;

					.margin-bottom-bj {
						.coupon-bg {
							width: 100%;
							height: 210rpx;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 1;
						}

						.coupon-sign {
							height: 110rpx;
							width: 110rpx;
							position: absolute;
							z-index: 99;
							top: -30rpx;
							right: 30rpx;
						}

						.item-left {
							width: 218rpx;
							height: 210rpx;
							position: relative;
							z-index: 2;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							flex-shrink: 0;

							.colour {
								.price {
									font-size: 52rpx;
									font-weight: bold;
								}

								.discount {
									font-size: 22rpx;
								}
							}

							.cu-tag {
								margin-top: 8rpx;
								color: #666666;
								background-color: rgba(255, 255, 255, .9);
							}
						}

						.item-right {
							padding: 25rpx;
							display: flex;
							flex-wrap: wrap;
							flex: 1;
							height: 210rpx;
							z-index: 2;
							overflow: hidden;
							align-content: space-between;

							.title {
								display: flex;
								align-items: center;
								width: 100%;

								.cu-tag {
									margin-top: 8rpx;
									color: #666666;
									background-color: rgba(255, 255, 255, .9);
								}

								.text-cut {
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									color: #828282;
									font-size: 24rpx;
								}
							}

							.content {
								display: flex;
								align-items: flex-end;
								justify-content: space-between;
								width: 100%;
								font-size: 24rpx;

								.wanl-gray {
									color: #828282;
								}

								.cu-btn {
									padding: 0 25rpx;
									font-size: 24rpx;
									height: 60rpx;
									color: #ff0015;
									background-color: transparent;
								}
							}
						}
					}
				}
			}

			.btn {
				width: 700rpx;
				margin: 20rpx auto 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 50rpx;
				background-color: #ff0015;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
